<template>
  <div class="component-banner">
    <div class="loading" v-if="list.length === 0">
      <span class="iconfont">&#xe66b;</span>
    </div>
    <div class="banner-wrapper" :style="wrapperStyle" v-else ref="bannerWrapper">
      <div class="subItem" v-for="(item,index) in bannerData" :key="index" :style="subItemStyle">
        <img :src="item[conf.field.thumb]" >
      </div>
    </div>
    <div class="page" v-if="list.length > 0">
      <ul>
        <template v-for="(item) in list.length">
          <li :class="{on:page===(item._$$index+1)}"></li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "banner",
    props:{
      list:{
        type:Array,
        required:true
      },
      config:{
        type:Object,
        default:function(){
          return {};
        }
      }
    },
    data(){
      return {
        bannerData:[],
        conf:Object.assign({
          duration:1000,
          isPage:true,
          field:{
            thumb:'thumb',
            src:'src',
            title:'title'
          }
        },this.config),
        totalPage:0,
        isLastPage:false,
        wrapperStyle:{
          width:0,
          transform:'translateX(0)',
          'transition-duration':'.3s'
        },
        subItemStyle:{
          width:0
        },
        page:1,
        intervalTag:null
      };
    },
    methods:{
      init(){

      },
      run(){
        this.intervalTag = setInterval(()=>{

        },this.conf.duration);
      },
      stop(){
        if(this.intervalTag){
          clearInterval(this.intervalTag);
        }
      },
      prev(){

      },
      next(){

      },
      play(){

      },
      copyBannerData(){
        this.list.forEach((el,index)=>{
          el._$$index = index;
        });
        this.bannerData = [this.list[this.list.length-1]].concat([...this.list]).concat([this.list[0]]);
        this.totalPage = this.list.length;
        this.wrapperStyle.width = ( this.bannerData.length * 100 ) + '%';
        this.subItemStyle.width = (100 / this.bannerData.length) + '%';
      }
    },
    mounted(){
      this.copyBannerData();
      this.run();
    },
    watch:{
      list:function(){
        this.copyBannerData();
        this.run();
      }
    }
  }
</script>

<style scoped lang="less">
  div.component-banner{
    width:100%;
    height:10em;
    overflow:hidden;
    position:relative;

    @keyframes loadingRotate {
      to{
        transform:rotate(360deg);
      }
      from{
        transform:rotate(0);
      }
    }
    .loading{
      display:block;
      width:auto;
      height:100%;
      line-height:10em;
      margin:0 5px;
      box-sizing:border-box;
      background-color:#fff;
      position:relative;

      span.iconfont{
        display:block;
        width:1em;
        height:1em;
        line-height:1em;
        font-size:2em;
        position:relative;
        top:50%;
        left:50%;
        margin: -0.5em 0 0 -0.5em;
        animation:loadingRotate 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        color:#C0C4CC;
      }
    }

    .banner-wrapper{
      height:100%;
      transition:transform .3s;

      .subItem{
        font-size:1em;
        width:0;
        display:inline-block;
        padding:0 5px;
        box-sizing:border-box;
        height:100%;
        overflow:hidden;

        img{
          display:block;
          width:100%;
          height:100%;
          border-radius:.3em;

        }
      }
    }

    @pageSize:1em;
    .page{
      position:absolute;
      z-index:10;
      left:50%;
      transform:translateX(-50%);
      bottom:.5em;
      width:auto;
      height:@pageSize;
      line-height:@pageSize;

      ul{

        li{
          display:inline-block;
          width:@pageSize/2;
          height:@pageSize/2;
          border-radius:@pageSize/4;
          background-color:#fff;
          margin:0 @pageSize/6;
        }

        li.on{
          background-color:#DF4338;
        }
      }
    }
  }
</style>
